import React, { useEffect, useRef, useState } from 'react';
import { queryInterVideo } from './service';
import type { ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Card, Descriptions } from 'antd';

const TableList: React.FC<{}> = (props: any) => {
  const { activityId, itemId, stepId } = props.params;
  const { uid } = props
  const actionRef = useRef<ActionType>();
  const [info, setInfo] = useState<any>({})
  const columns: any = [

    {
      title: '用户ID',
      dataIndex: 'uid',
      hideInSearch: true
    },
    {
      title: '用户昵称',
      dataIndex: 'nickname',
      hideInSearch: true
    },
    {
      title: '真实姓名',
      dataIndex: 'name',
      hideInSearch: true
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      hideInSearch: true
    },
    {
      title: '班级',
      dataIndex: 'className',
      hideInSearch: true
    },
    {
      title: '辅导老师',
      dataIndex: 'assistTeacherName',
      hideInSearch: true
    },
    {
      title: '标记题正确率',
      dataIndex: 'liveTagCorrectRate',
      hideInSearch: true
    },
    {
      title: '互动课件正确率',
      dataIndex: 'liveInteractiveCorrectRate',
      hideInSearch: true
    },
    {
      title: '查看学习报告',
      dataIndex: 'report',
      hideInSearch: true,
      render: (_: any, recore: any) => {
        return (
          recore.classroomId ?
            <a target="_blank" href={`/web/gospirit_webview/study_report?token=${localStorage.getItem('token')}&uid=${recore.uid}&stepId=${recore.stepId}`} rel="noreferrer">查看报告</a> :
            <>-</>
        )
      }
    },
  ]
  useEffect(() => {
    actionRef.current?.reload()
  }, [uid, stepId])
  return (

    <ProTable<any>
      rowKey="id"
      search={
        false
      }
      actionRef={actionRef}
      tableExtraRender={() => (
        <Card>
          <Descriptions size="small" column={2}>
            <Descriptions.Item label="条目ID">{info.itemId}</Descriptions.Item>
            <Descriptions.Item label="条目名称">{info.name}</Descriptions.Item>
            <Descriptions.Item label="条目开始时间">{info.startTime}</Descriptions.Item>
          </Descriptions>
        </Card>
      )}
      request={async (params: any) => {

        const res = await queryInterVideo({
          ...params,
          pageNum: params.current,
          activityId,
          itemId,
          searchParam: uid,
          stepId
        });
        setInfo(res.data)
        return {
          data: res.data.userList,
          success: true,
          total: res.data.count,
        };
      }}
      columns={columns}
    />
  );
};

export default TableList;
